@BG: rgba(63, 96, 111, 1);
@BG_LINE: #40c2f8;

.asideContainer {
  position: absolute;
  left: 78px;
  top: -60px;
  // background: @BG;
  // padding: 10px;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  cursor: initial;
  .effLine {
    position: absolute;
    width: 0;
    height: 2px;
    background: @BG_LINE;
    top: 0;
    left: 0;
    transform-origin: left;
    transform: translate3d(-77px, 67px, 0) rotate(-25deg);
    animation: line 0.3s linear forwards;
    animation-delay: 0.2s;
  }
  aside {
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 436px;
    // height: 300px;
    z-index: 10;
    background: @BG;
    transform-origin: left top;
    will-change: transform;
    animation: shake 3s infinite;
    // animation-delay: 0.3s;
    .close {
      position: absolute;
      top: -2px;
      right: 10px;
      // background: @BG;
      cursor: pointer;
    }
    .itemAside {
      padding-bottom: 10px;
      // border-left: 1px solid @BG_LINE;
      .itemTitle {
        font-weight: bold;
        color: white;
        letter-spacing: 1px;
        // padding-left: 10px;
        font-size: 14px;
        padding-bottom: 5px;
        float: left;
        border-bottom: 1px solid @BG_LINE;
        display: flex;
        justify-content: center;
        align-items: center;
        i {
          font-size: 14px;
        }
      }
      .itemBox {
        // margin-top: 10px;
        clear: both;
        padding: 10px;
        color: white;
      }
    }
  }
  .asideWarp {
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
    opacity: 0;
    animation: show 0.3s linear forwards;
    animation-delay: 0.6s;
  }
  .wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    // color:;
  }
}
@keyframes line {
  from {
    width: 0;
  }
  to {
    width: 90px;
  }
}
@keyframes show {
  from {
    // width: 0;
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes shake {
  from {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }
  40% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
  to {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }
}
